<!-- filename: frontend/src/components/Player.vue (Teleport 修正版) -->
<template>
  <!-- 播放器主容器 -->
  <view class="mini-player-container" :class="{ 'detail-mode': isDetailMode }">
    <view class="player-content" @click.stop="toggleDetailMode">
      <image 
        :src="playerStore.currentSong?.cover_art_url || '/static/placeholder.jpg'"
        class="song-cover"
        mode="aspectFill"
        @click.stop="showCoverModal = true"
      />
      
      <view class="info-controls-wrapper">
        <view class="song-info">
          <view class="song-title">{{ playerStore.currentSong?.title || '未知歌曲' }}</view>
          <view v-if="isDetailMode" class="song-details">
            <text>{{ playerStore.currentSong?.cover_artists || '未知' }}</text>
            <text class="separator">•</text>
            <text>{{ playerStore.currentSong?.original_artists || 'N/A' }}</text>
            <text class="separator">•</text>
            <text>{{ playerStore.currentSong?.cover_date }}</text>
          </view>
          <view v-else class="song-artist">{{ playerStore.currentSong?.cover_artists || '未知艺术家' }}</view>
        </view>

        <view v-if="isDetailMode" class="progress-section" @click.stop>
          <text class="time-text">{{ formatTime(playerStore.currentTime) }}</text>
          <slider
            :value="playerStore.currentTime"
            :max="playerStore.duration || 100"
            @changing="handleSliderChanging"
            @change="handleSliderChange"
            activeColor="#3cc51f"
            backgroundColor="#e0e0e0"
            block-size="12"
            block-color="#3cc51f"
            class="progress-slider"
          />
          <text class="time-text">{{ formatTime(playerStore.duration) }}</text>
        </view>
      </view>

      <view v-if="!isDetailMode" class="controls">
        <view class="control-btn mode-btn" @click.stop="playerStore.changePlayMode()">
          <svg v-if="playerStore.playMode === 'loop'" width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z"/></svg>
          <svg v-if="playerStore.playMode === 'single'" width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4zm-2-5V9h-1l-2 1.2V11h1.5v3H13v-1.2L15 14z"/></svg>
          <svg v-if="playerStore.playMode === 'random'" width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M10.59 9.17L5.41 4 4 5.41l5.17 5.17 1.42-1.41zM14.5 4l2.04 2.04L4 18.59 5.41 20 17.96 7.46 20 9.5V4h-5.5zm.33 9.41l-1.41 1.41 3.13 3.13L14.5 20H20v-5.5l-2.04 2.04-3.13-3.13z"/></svg>
        </view>
        <view class="control-btn" @click.stop="playerStore.playPrev()">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M6 6h2v12H6zm3.5 6l8.5 6V6z"/></svg>
        </view>
        <view class="control-btn play-pause-btn" @click.stop="playerStore.togglePlay()">
          <svg v-if="playerStore.isPlaying" width="32" height="32" viewBox="0 0 24 24" fill="currentColor"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>
          <svg v-else width="32" height="32" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
        </view>
        <view class="control-btn" @click.stop="playerStore.playNext()">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M16 6h2v12h-2zm-3.5 6l-8.5 6V6z"/></svg>
        </view>
        <!-- 新增的下载按钮 -->
        <view class="control-btn download-btn" @click.stop="downloadSongs([playerStore.currentSong.id])">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/></svg>
        </view>
      </view>
    </view>
    
    <!-- 【核心修改】将封面预览模态框用 Teleport 包裹起来 -->
    <Teleport to="body">
      <view class="cover-modal" v-if="showCoverModal" @click="showCoverModal = false">
        <view class="modal-background"></view>
        <image :src="playerStore.currentSong?.cover_art_url || '/static/placeholder.jpg'" class="modal-cover" mode="aspectFit" />
      </view>
    </Teleport>
  </view> 
</template>

<script setup>
import { ref } from "vue";
import { usePlayerStore } from "@/store/player";
import { downloadSongs } from "@/utils/download.js";

const playerStore = usePlayerStore();
const showCoverModal = ref(false);
const isDetailMode = ref(false);

const toggleDetailMode = () => {
  isDetailMode.value = !isDetailMode.value;
};

const handleSliderChanging = (_e) => {
  // 拖动中，暂时不做任何事
};

const handleSliderChange = (e) => {
  playerStore.seek(e.detail.value);
};

const formatTime = (seconds) => {
  if (Number.isNaN(seconds) || seconds < 0) {
    return "00:00";
  }
  const min = Math.floor(seconds / 60);
  const sec = Math.floor(seconds % 60);
  return `${String(min).padStart(2, "0")}:${String(sec).padStart(2, "0")}`;
};
</script>

<style scoped lang="scss">
.mini-player-container {
  position: fixed;
  bottom: var(--window-bottom, 50px);
  left: 50%;
  transform: translateX(-50%);
  width: 100%; 
  max-width: 800px;
  box-sizing: border-box;
  height: 65px;
  background-color: #ffffff;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.07);
  z-index: 999;
  transition: height 0.3s ease;
  border-top: 1px solid #f0f0f0;
  
  &.detail-mode {
    height: 90px;
  }
}

.player-content {
  display: flex;
  align-items: center;
  padding: 0 10px;
  height: 100%;
}

.song-cover {
  width: 50px;
  height: 50px;
  border-radius: 8px;
  flex-shrink: 0;
  margin-right: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  
  .detail-mode & {
    width: 70px;
    height: 70px;
  }
}

.info-controls-wrapper {
  flex-grow: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-right: 5px;
}

.song-info {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

.song-title {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  text-overflow: ellipsis;
  overflow: hidden;
}

.song-artist, .song-details {
  font-size: 12px;
  color: #888;
  text-overflow: ellipsis;
  overflow: hidden;
}

.song-details {
  display: flex;
  align-items: center;
  .separator {
    margin: 0 6px;
  }
}

.progress-section {
  display: flex;
  align-items: center;
  width: 100%;
  margin-top: 4px;
}

.time-text {
  font-size: 11px;
  color: #999;
  width: 40px;
  text-align: center;
}

.progress-slider {
  flex-grow: 1;
  margin: 0;
}

.controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  color: #333;
  padding-left: 10px;
}

.control-btn {
  padding: 4px;
  margin: 0 2px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s;
  &:hover { color: #3cc51f; }
}
.mode-btn { margin-right: 8px; }

/* 【核心修改】这是之前可以正常工作的、正确的模态框样式 */
.cover-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1001; /* 比播放器层级更高 */
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
}
.modal-cover {
  position: relative;
  width: 80vw;
  height: 80vw;
  max-width: 400px;
  max-height: 400px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.controls {
  /* ... */
  .download-btn {
    margin-left: 10px; /* 和其他按钮隔开一点距离 */
  }
}
</style>